import React from 'react'
//购物车按钮
import Car from '../car/car.js'
//购物车内容
import ShopCar from '../car/shopCar.js'
import { connect } from "react-redux"
import action from '../../../store/action/index.js'

import "./list.less"

import Banner from '../../../components/banner/banner.js'

import cookies from 'js-cookie'
import axios from "axios"

import Timer from "../../../components/timer.js"

// import Map from "../../../components/map/map.js"
const AMap = window.AMap;
class List extends React.Component {

  state = {
    listclickindex: 0,
    // 设置获取dom节点
    listleftdom: null,
    listrightdom: null,
    shopcarFlag: false,
    list_city_name: ""
  }

  render() {
    let { listclickindex, list_city_name } = this.state
    let { listleftdata, listrightdata } = this.props
    return (
      <div className="list_box">
        {/* <Map /> */}
        {/* 表头 */}
        <div className="list_top_box">
          {/* 修改思路为定位+模糊搜索 */}
          <div className="list_top_loca">
            <span className="iconfont icon-dingwei1">{list_city_name}</span>
          </div>
          <div className="list_top_input" onClick={() => { this.jumpRouterInput() }}>
            <input type="text" placeholder="大家都在搜的热点食品" />
          </div>
          <div></div>
        </div>
        {/* 底部内容 */}
        <div className="list_btm_box">
          {/* 左侧内容 */}
          <div className="list_btm_left" ref={(listleftdom) => { this.listleftdom = listleftdom }}>

            {/* <div className="list_btm_left"> */}
            {/* 判断数据是否存在如果存在直接渲染，如果没有不进行渲染 */}
            {
              listleftdata.length > 0 ?
                listleftdata.map((item, index) => {
                  return <div
                    className={`list_btm_left_every ${listclickindex === index ? 'list_btm_every_active' : null}`}
                    onClick={() => { this.clickListBtnEvery(index) }} key={item.type_id}>
                    {item.type_typeMess}
                  </div>
                }) : null
            }
          </div>
          {/* 右侧内容 */}

          <div className="list_btm_right" ref={(listrightdom) => { this.listrightdom = listrightdom }} onTouchMove={() => { this.clickListRight() }}>
            {/* 轮播图 */}
            <div className="list_btm_right_banner">
              <Banner />
            </div>

            {/* 列表 */}
            <div>
              {
                listrightdata.length > 0 ?
                  listrightdata.map((item, index) => {
                    // console.log(item);
                    return <div className={`list_btm_right_every_box`} key={index} >
                      <h3>{item.shop_typeMess}</h3>
                      {
                        item.shop_type.map(shopitem => {
                          return <div className="list_btm_right_every  animate__animated  animate__bounceInRight" key={shopitem.commodity_id}>
                            <div className="list_btm_right_every_img">
                              <img src={shopitem.commodity_images[0]} />

                            </div>
                            <div className="list_btm_right_every_cont">
                              <p className="list_btm_right_every_cont_name">{shopitem.commodity_namer}</p>
                              <p className="list_btm_right_every_cont_mess">{shopitem.commodity_mess}</p>
                              <p className="list_btm_right_every_cont_price">
                                <span className="list_btm_right_every_cont_pr"><i>{shopitem.commodity_unitPrice[0]}元</i></span>
                                {
                                  shopitem.stock > 0 ?
                                    <span className="list_btm_right_every_cont_spec" onClick={() => {
                                      this.listJumpDetail(shopitem)
                                      sessionStorage.setItem("shop_id", JSON.stringify(shopitem.commodity_id))
                                      sessionStorage.setItem("shop_img", JSON.stringify(shopitem.commodity_images[1]))
                                    }}>商品详情</span>
                                    : <span className="list_btm_right_every_cont_pan iconfont icon-wodetaocan-zhuangtaiyishoukong" style={{ disabled: true }}></span>
                                }
                              </p>

                            </div>
                          </div>
                        })
                      }
                    </div>
                  }) : null
              }
            </div>
          </div>
          <Car parentWay={{ ...this }}></Car>
        </div>
        {/* 购物车内容 */}
        <div className="shopcar">
          {this.state.shopcarFlag === true ?
            <div className="shopcar_zz"
              ref={(shopzz) => { this.shopzz = shopzz }}
              onTouchStart={() => { this.closeShopCar() }}
              style={{ position: 'fixed', background: 'rgba(0,0,0,0.5)', width: '100vw', height: '100vh', left: 0, top: 0 }}
            >

            </div>
            : null}
          {this.state.shopcarFlag === true ?
            <div
              ref={(shopcar) => { this.shopcar = shopcar }}
              className="shop_car"
            ><ShopCar closeShopCar={this.closeShopCar}></ShopCar></div> : null}
        </div>

      </div>
    )
  }
  //打开购物车
  openShopCar = (res) => {
    this.setState({ shopcarFlag: res }, () => {
      setTimeout(() => {
        this.shopzz.style.opacity = 1
        this.shopcar.style.bottom = 0
      }, 250);
    })
  }
  //关闭购物车
  closeShopCar = () => {
    this.shopcar.style.bottom = -100 + '%'
    this.shopzz.style.opacity = 0

    setTimeout(() => {
      this.setState({ shopcarFlag: false })
    }, 250);

  }
  // 跳转路由
  jumpRouterInput = () => {
    // 条搜索框
    this.props.history.push('/search')

  }

  listJumpDetail(item) {
    // 跳转到详情简介首页
    sessionStorage.setItem('shop_router', JSON.stringify(this.props.history.location.pathname))
    this.props.history.push('/itemdetail')
    axios({
      url: "/api/front_end/addHistory",
      method: "post",
      data: {
        commodity_id: item.commodity_id,
        timer: Timer(),
        user_id: cookies.get('user_id')
      }
    }).then(res => {
      // console.log(res);
    })
  }

  // 设置高亮
  // 设置双楼层效果
  clickListBtnEvery = (index) => {
    this.listrightdom.removeEventListener("scroll", this.scrollTop)
    this.setState({ listclickindex: index })
    // 点击左侧导航获取点击位置和右侧内容到浏览器顶部距离 
    let topright = this.listrightdom.children[1].children[index].offsetTop

    this.listrightdom.scrollTo({
      top: topright,
      behavior: "smooth"
    })
  }
  // 右侧楼层效果
  clickListRight = () => {
    this.listrightdom.addEventListener("scroll", this.scrollTop)
  }
  scrollTop = () => {
    [...this.listrightdom.children[1].children].forEach((item, index) => {
      if (this.listrightdom.scrollTop + 60 > item.offsetTop) {
        this.setState({ listclickindex: index })
      }
    })
  }

  componentDidMount() {
    if (this.props.listleftdata.length === 0) {
      this.props.getListLeft()

    }
    // 获取右侧内容数据
    if (this.props.listrightdata.length === 0) {
      this.props.getListRight({
        number: 2,
        store_site: ""
      })
    }

    this.props.getCarData({
      user_id: cookies.get('user_id')
    })

    // 实现实时定位
    var map = new AMap.Map('container', {
      resizeEnable: true
    });

    let that = this
    AMap.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 1000,          //超过10秒后停止定位，默认：5s
        buttonPosition: 'RB',    //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition(function (status, result) {
        // console.log(result);
        if (status === "complete") {
          that.setState({ list_city_name: result.addressComponent.province })
        }

      });
    });
  }


}
export default connect(state => state.foodf, action.foodf)(List)


